<!DOCTYPE HTML>
<html>

<head>
  <style>
    #languages li {
      color: brown;
    }
    
    #languages > li {
      color: black;
    }
    
    #e-slavic {
      font-style: italic;
    }
    
    #e-slavic ~ li {
      color: red;
    }
    
    #latvian {
      font-style: italic;
    }
    
    #latvian * {
      font-style: normal
    }
    
    #latvian + li {
      color: green;
    }
    
    code {
      border: 1px solid black;
    }
  </style>
</head>

<body>

  <h3>Балтославянские языки</h3>

  <ol id="languages">
    <li>Славянские языки
      <ol>
        <li>Славянские микроязыки</li>
        <li>Праславянский язык</li>
        <li id="e-slavic">Восточнославянские языки <code>#e-slavic</code></li>
        <li>Западнославянские языки <code>#e-slavic ~ li</code></li>
        <li>Южнославянские языки <code>#e-slavic ~ li</code></li>
        <li> ... <code>#e-slavic ~ li</code></li>
      </ol>
    </li>
    <li>Балтийские языки
      <ol>
        <li>Литовский язык</li>
        <li id="latvian">Латышский язык <code>#latvian</code>
          <ol>
            <li>Латгальский язык <code>#latvian *</code></li>
          </ol>
        </li>
        <li>Прусский язык <code>#latvian + li </code></li>
        <li>... (следующий элемент уже не <code>#latvian + li</code>)</li>
      </ol>
    </li>
  </ol>

</body>

</html>